import {Component, ElementRef, Input, OnInit, Renderer, SimpleChanges, ViewChild} from '@angular/core';
import {fadeIn} from '../../../../../platform/zknwui/core/common/animation/fadeIn-animation';
import {TagData} from '../../../../entity/tag-data.model';

@Component({
  selector: 'app-plan-power-panel',
  templateUrl: './plan-power-panel.component.html',
  styleUrls: ['./plan-power-panel.component.css'],
  animations: [fadeIn]
})
export class PlanPowerPanelComponent implements OnInit {
  /**
   * 数据集合
   *
   * @memberof PlanPowerPanelComponent
   */
  @Input()
  plantData: PlantData;
  /**
   * 进度条颜色
   *
   * @type {string}@memberof PlanPowerPanelComponent
   */
  @Input()
  plantColor: string;
  /**
   * 标题
   *
   * @type {string}@memberof PlanPowerPanelComponent
   */
  @Input()
  plantTitel: string;
  /**
   * 单位
   *
   * @type {string}@memberof PlanPowerPanelComponent
   */
  @Input()
  plantUnit: string;
  /**
   * 倍率
   *
   * @type {string}@memberof PlanPowerPanelComponent
   */
  @Input()
  ratio = 1;
  @Input() isOnlyHaveWinfarm;
  /**
   * 计划电量是否为0
   *
   * @type {boolean}@memberof PlanPowerPanelComponent
   */
  private isExistPlantPower: boolean = true;
  /**
   * echarts数据
   *
   * @type {object}@memberof PlanPowerPanelComponent
   */
  public option: object;
  /**
   * 是否显示echarts
   *
   * @type {number}@memberof PlanPowerPanelComponent
   */
  public powerShow: boolean = false;
  /**
   * echarts对象
   *
   * @type {number}@memberof PlanPowerPanelComponent
   */
  private echartsIntance: any;
  @ViewChild('details', {static: true})
  details: ElementRef;

  constructor(
    private renderer: Renderer
  ) {
  }

  ngOnInit() {

  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['plantData'] && changes['plantData'].currentValue) {
      this.changeData();
    }
  }

  private initOption() {

    this.option = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          //decoration: 'none',
          fontSize: 12,
        },
        axisPointer: {
          type: 'cross'
        }

      },
      title: {
        show: true,
        text: this.plantTitel,
        x: 'left',
        textStyle: {
          color: '#7BD1AE',
          fontSize: 16,
        },
        padding: 10
      },
      calculable: true,
      grid: {
        left: '8%',
        right: '6%',
        top: '15%',
        bottom: '10%',
        // containLabel: true
      },
      legend: {
        data: ['实际(万kWh)', '计划(万kWh)', '完成率(%)'],
        x: 'right',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          fontSize: 8,
          color: '#7BD1AE'
        },
        padding: 10
      },
      xAxis: [
        {
          type: 'category',
          data: this.plantData.items.map(o => o.name),
          axisLabel: {
            interval: 0,
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: 14,
            }
          },
          axisPointer: {
            type: 'shadow'
          },
          axisLine: {
            lineStyle: {
              color: '#8DBDC7',
              width: 1,
              type: 'solid'
            }
          }
        },

      ],
      yAxis: [
        {
          type: 'value',
          name: '发电量(万kWh)',
          splitNumber: 5,
          nameTextStyle: {
            color: '#37766D',
          },
          axisLabel: {
            formatter: '{value}',
            interval: 0,
            show: true,
            textStyle: {
              color: '#37766D',
              fontSize: 16,
            }

          },
          splitLine: {
            lineStyle: {
              opacity: 0.2
            }
          },
          axisLine: {
            lineStyle: {
              color: '#8DBDC7',
              width: 1,
              type: 'solid'
            }
          }
        },
        {
          type: 'value',
          name: '完成率(%)',
          splitLine: {
            show: false
          },
          //min: 0,
          //max: 100,
          splitNumber: 5,
          axisLabel: {
            formatter: '{value}',
            interval: 0,
            show: true,
            textStyle: {
              color: '#37766D',
              fontSize: 10,
            }
          },
          nameTextStyle: {
            color: '#37766D',
          },
          axisLine: {
            lineStyle: {
              color: '#8DBDC7',
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          name: '实际(万kWh)',
          type: 'bar',
          data: this.plantData.items.map(o => (o.completePower ? (o.completePower.value) * this.ratio : (o.adjustPower * this.ratio)).toFixed(2)),
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#B17C2E',
              fontSize: 12,
            }
          },
        },
        {
          name: '计划(万kWh)',
          type: 'bar',
          data: this.plantData.items.map(o => (o.plantPower * this.ratio).toFixed(2)),
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
          itemStyle: {
            normal: {
              color: '#7FCDB3',
              fontSize: 12,
            },

          },
          splitLine: {
            show: false
          },
        },
        {
          name: '完成率(%)',
          type: 'line',
          yAxisIndex: 1,
          data: this.plantData.items.map(o => o.completiones.toFixed(2)),
          smooth: true,

          itemStyle: {
            normal: {
              color: '#FFFA11',
              fontSize: 12,
              lineStyle: {
                color: '#8CBEC7'
              }
            },

          }
        }
      ]
    };
  }

  /**
   * 数据改变时触发
   *
   * @param {}
   *
   * @memberof PlanPowerPanelComponent
   */
  public changeData() {
    // console.log(this.plantData.items.map(o => (o.completePower ? (o.completePower.value + o.adjustPower) * this.ratio : (o.adjustPower * this.ratio)).toFixed(2)))

    if (!this.plantData) return false;
    if (this.echartsIntance) {
      this.echartsIntance.setOption(this.option);
    } else {
      this.initOption();
      //   this.plantData.items.map(o =>{
      //   if(o.completePower){
      //     console.log(((o.completePower.value + o.adjustPower) * this.ratio).toFixed(2))
      //   }else{
      //      console.log((o.adjustPower * this.ratio).toFixed(2))
      //   }
      // })
    }

  }

  /**
   * 初始化echarts实例
   *
   *
   * @memberof Echart2Component
   */
  onChartInit(ec: any) {
    this.echartsIntance = ec;
  }

  /**
   * 鼠标移入当前组件
   *
   * @param {}
   *
   * @memberof PlanPowerPanelComponent
   */
  enterPower() {
    this.powerShow = true;

  }

  /**
   * 鼠标移出当前组件
   *
   * @param {}
   *
   * @memberof PlanPowerPanelComponent
   */
  leavePower() {
    this.powerShow = false;
  }

}

export class PlantData {
  public totalPlantPower: number = 0;
  public totalCompletePower: number = 0;
  public totalCompletiones: number = 0;

  /* public get totalPlantPower(): number {
    return this._totalPlantPower;
  }
  public set totalPlantPower(value: number) {
    this._totalPlantPower = value;
    this.getCompletiones();
  }
  public get totalCompletePower(): number {
    return this._totalCompletePower;
  }
  public set totalCompletePower(value: number) {
    this._totalCompletePower = value;
    this.getCompletiones();
  } */
  /* public get totalCompletiones(): number{
    return this. _totalCompletiones;
  } */
  public items: PlantDataItem[] = [];

  /* private getCompletiones() {
    if (this._totalPlantPower == 0) {
      this._totalCompletiones = 0;
    }
    else {
      this._totalCompletiones = this.totalCompletePower / this._totalPlantPower*100;
    }
  } */
}

export class PlantDataItem {
  public id: number;
  public name: string;
  public plantPower: number = 0;
  public completePower: TagData;
  public completiones: number = 0;
  public adjustPower?: number = 0;

  /* public get plantPower(): number {
    return this._plantPower;
  }

  public set plantPower(value: number) {
    this._plantPower = value;
    this.getCompletiones();
  }
  public get completePower(): number {
    return this._completePower;
  }
  public set completePower(value: number) {
    this._completePower = value;
    this.getCompletiones();
  }

  public get completiones(): number {
    return this._completiones;
  }

  private getCompletiones() {
    if (this._plantPower == 0) {
      this._completiones = 0;
    }
    else {
      this._completiones =this.completePower / this._plantPower*100;
    }
  } */


}


// WEBPACK FOOTER //
// ./src/app/module/monitor/main/plan-power-panel/plan-power-panel.component.ts
